<template>
    <div  class="top-menu">
        <p class="title">{{title}}</p>
        <el-menu default-active="2" mode="horizontal" v-if="false"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <template v-for="(item,index) in menuList">
                <el-submenu v-if="item.children && item.children.length>0" :index="index">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.title}}</span>
                    </template>
                    <el-menu-item :index="index+'-'+cindex" v-for="(citem,cindex) in item.children">
                        <i :class="item.icon"></i>
                        <span slot="title">{{citem.title}}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item  :index="index" v-else>
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import {Minix} from './menuMinin'
    export default {
        name:'topMenu',
        mixins:[Minix],
        data () {
            return{
                title:'既席分析系统使用DEMO'
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style scoped lang="stylus">
    .top-menu{
        width 100%
        height 60px
        background-color #545c64;
        display: flex
        justify-content flex-start
        .title{
            height 100%
            color white
            padding 20px
            box-sizing border-box
            width 240px
            font-weight bold
            font-size 16px
        }
    }
</style>
